import React from 'react';
import './vertical_3.css';

class Vertical_3  extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        const {datainfo}=this.props;

        let div1style={width:'10px',height:'10px',display:'inline-block',marginTop:'9px',borderTop:'1px solid #5167A3'}
        return<div>
        { datainfo!=null&&datainfo.length>0?
            <div class=" timeline-vertical-3">
            {
                datainfo.map((item,i)=>{
                let contentdata=item.content;
                let contentArr=contentdata.split(/\n/g);
                return <div class="timeline-content-vertical-3">
                            <div className={'timeline-img-vertical-3  num_'+i}>
                            </div>
                            <div class="timeline-datainfo-vertical-3">
                                <div>
                                    <div class="timeline-date-vertical-3">
                                        <div className={"date-right-vertical-3 num_"+i} style={div1style}></div>
                                        <div className={'timeline-info-date-vertical-3 num_'+i } >{item.timeline}</div>
                                    </div>
                                </div>
                                <div className="content-vertical-3" >
                                    <div>
                                        {
                                            contentArr.map((item,i)=>{
                                                if(item==""){
                                                    return <span style={{display:'block',height:'20px'}}></span>
                                                }
                                                return <span style={{paddingLeft:'6px',paddingRight:'6px',display:'block'}}>{item}</span>
                                            })
                                        }
                                    </div>
                                </div>
                            </div>
                        </div>
            })

        }
    </div>
    :
    <div style={{textAlign:'center'}}><img src="/spa/portal/images/timelinestyle/nodata.png" /></div>
    }
    </div>
    }
}
export default Vertical_3;